<!-- 提醒时间设置 -->
<template>
  <div id="dialog-container">
    <el-button type="text" @click="dialogVisible = true">提醒时间设置</el-button>
    <el-dialog v-dialogDrag :title="'提醒时间设置'" append-to-body :visible.sync="dialogVisible" :close-on-click-modal="false" width="700px">
      <el-form :model="formData" :inline="true" size="small" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="提醒时间名称：">
              <el-input v-model="formData.noticeType"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="时间：">
              <el-input v-model="formData.timeLimit"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button type="primary" plain size="small" @click="addCode">添加</el-button>
      <el-table :data="tableData" size="small">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>
        <el-table-column prop="noticeType" align="center" label="提醒时间名称" min-width="100">
          <template slot-scope="scope">
            <el-input v-if="editId==scope.row.id" size="small" v-model="scope.row.noticeType" placeholder="请输入内容"></el-input>
            <span v-if="editId!=scope.row.id">{{scope.row.noticeType}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="timeLimit" align="center" label="时间" min-width="100">
          <template slot-scope="scope">
            <el-input v-if="editId==scope.row.id" size="small" v-model="scope.row.timeLimit" placeholder="请输入内容"></el-input>
            <span v-if="editId!=scope.row.id">{{scope.row.timeLimit}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" align="center" label="操作" min-width="100">
          <template slot-scope="scope">
              <el-button v-if="editId!=scope.row.id" size="small" @click="handleEdit(scope.row.id)" type="primary" plain>编辑</el-button>
              <el-button v-if="editId==scope.row.id" size="small" @click="editData(scope.row.id,scope.row.noticeType,scope.row.timeLimit)" type="primary" plain>保存</el-button>
              <el-button v-if="editId==scope.row.id" size="small" @click="editId=''">取消</el-button>
              <el-popover placement="top" title="确认删除吗？" width="160" trigger="click" v-model="scope.row.visible">
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="scope.row.visible=false">取消</el-button>
                  <el-button type="primary" size="mini" @click="deleteData(scope.row.id)">确定</el-button>
                </div>
                <el-button v-show="editId!=scope.row.id" size="small" type="danger" slot="reference" plain>删除</el-button>
              </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { noticeSettingList, saveNoticeSetting, deleteNoticeSetting } from 'service/task';
  export default {
    data() {
      return {
        dialogVisible: false,
        formData: {
          noticeType: '',
          timeLimit: ''
        },
        editId: '',
        isLoading: false,
        typeOption: [{
          value: '1',
          label: '委托型',
        }, {
          value: '2',
          label: '生产型',
        }, {
          value: '3',
          label: 'MES系统推送'
        }],
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    mounted() {
      this.refreshTableData();
    },
    methods: {
      handleClose() {
        this.form.code = '';
        this.dialogVisible = false;
      },
      // 添加
      addCode() {
        saveNoticeSetting({
          noticetype: this.formData.noticetype,
          timeLimit: this.formData.timeLimit
        }).then(res => {
          if(res.data.success) {
            this.refreshTableData();
          }
        })
      },
      handleEdit(id) {
        this.editId = id;
      },
      // 删除
      deleteData(id) {
        deleteNoticeSetting(id)
          .then((response) => {
            this.refreshTableData();
          });
      },
      // 编辑
      editData(id, code) {
        this.editId = '';
        saveNoticeSetting({
          id: id,
          noticetype: this.formData.noticetype,
          timeLimit: this.formData.timeLimit
        }).then((res) => {
          if(res.data.success) {
            this.refreshTableData();
          }
        })
      },
      // 获取基础列表
      refreshTableData() {
        this.isLoading = true;
        noticeSettingList()
          .then((res) => {
            this.tableData = res.data.result.content;
            this.isLoading = false;
          });
      },
    }
  }

</script>
